<template>
  <view class="myRightsBottomPopup">
    <u-popup style="position: relative;" v-model="filterBoxShow" mode="bottom" @close="handleClose"
      border-radius="36rpx" length="90%">
      <view class="wrapper" type="line">
        <view class="popupTop">
          <text class="mutiSelect" v-if="!mutiSelectAvtive" @click="changeMutiSelect">多选</text>
          <text class="mutiSelect" v-if="mutiSelectAvtive" @click="cancelMutiSelect">取消</text>
          <text class="popupTitle">发送权益</text>

          <img class="closeBtn" :src="closeBtn" @click="handleClose"></img>
        </view>
        <u-tabs v-if="filterBoxShow" :current="currentIndex" name="rightName" :list="rightsList"
          @change="handleCateClick" height="88" :active-item-style="activeItemStyle" :gutter="24" :bar-style="barStyle"
          font-size="28" :inactive-color="'#999999'" :bg-color="'#f5f5f5'"></u-tabs>
        <scroll-view scroll-y="true" style="height: 55vh;">
          <template v-for="item,index in rightsList">
            <view class="rightCard" v-if="index==currentIndex" :key="item.rightName">
              <view class="rightCardTop">
                <img :src="rightCardIcon" class="rightCardIcon">
                {{item.rightName}}
              </view>
              <!-- 先处理为空的情况 -->
              <!-- <template v-if="!item.children||item.children.length==0">
                <view class="emptyText">
                  暂无
                </view>
              </template> -->
              <template>
                <!-- 如果是有报告的情况下需要特殊处理。。 -->
                <template v-if="item.rightId==7||item.rightId==12">
                  <!-- 有多个children，但是只需要显示一个，我服了 -->
                  <view class="rightCardBody">
                    <template>
                      <view class="left">
                      </view>
                      <view class="right">
                        <text>
                          {{item.rightName}} {{item.children.length||0}}/3</text>
                        <text class="rightStatusText">{{item.children.length==3?'已完成':'待选择'}}</text>
                      </view>
                    </template>
                  </view>
                </template>
                <!-- 正常情况 -->
                <template v-else>
                  <view class="rightCardBody" v-for="_item,_index in item.children" :key="_item.rightId">
                    <view class="left">
                      <view class="up-line" :class="[handleUpLineClass(_item, _index,item.children)]"
                        v-if="_index != item.children.length + 1">
                      </view>
                      <view class="circle" :class="[handleCircleClass(_item, _index,item.children)]"> </view>
                      <view class="down-line" :class="[handleDownClass(_item, _index,item.children)]"
                        v-if="_index != item.children.length - 1">
                      </view>
                    </view>
                    <view class="right">
                      <text :class="{'doingRight':(_item.rightStatus==20)}">{{_item.rightName}}</text>
                      <text class="rightStatusText">{{handleRightstatus(_item)}}</text>
                    </view>
                  </view>
                </template>

              </template>
              <view class="rightCardBottom">
                <view v-if="!mutiSelectAvtive" class="bottomBtn" @click="handleSendZhituCard(item)">发送</view>
                <view v-if="mutiSelectAvtive&&item.isPushed===false" class="circle" @click="addMutiList(item)"></view>
                <view v-if="mutiSelectAvtive&&item.isPushed===true" class="circleRight" @click="editMutiList(item)">
                </view>
              </view>
            </view>
          </template>
        </scroll-view>
      </view>
      <view class="bottom" v-if="mutiSelectAvtive && mutiList.length>0">
        <view class="alreadyChoose">已选<span>{{mutiList.length}}</span>个</view>
        <view class="confirmButton" @click="confirmSend">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getPersonRightList } from "@/api/modules/career.js";
export default {
  props: {
    isConsultant: {
      type: Boolean,
      default: false,
    },
    chatId: {
      type: Number,
      required: true,
    },
    selfInfo: {
      type: Object,
      required: true,
    },
    oppInfo: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chatRoles() {
      return this.isConsultant ? "10" : "20";
    },
  },
  data() {
    return {
      mutiList: [], // 存放多选文件的临时数组
      mutiSelectAvtive: false, // 判断当前多选是否处于激活状态
      closeBtn: this.$imgBase + "/careerPath/closeBtn.svg",
      filterBoxShow: false,
      currentIndex: 0,
      rightsList: [],
      rightCardIcon: this.$imgBaseSelf + "careerChat/rightCardIcon.svg",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      //在tab中选中的一项
      selecetedFirstRight: {},
      activeItemStyle: {
        "font-weight": "600",
        color: "#000000",
        "font-size": "32rpx",
      },
      barStyle: {
        width: "20px",
        height: "8px",
        background:
          "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)",
        "border-radius": "4px",
        left: "0",
        bottom: "12rpx",
      },
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    // 统一发送多选的请求
    confirmSend() {
      this.mutiList.forEach((item) => {
        this.handleSendZhituCard(item);
      });
      this.mutiSelectAvtive = false;
      this.mutiList = [];
    },
    changeMutiList(item) {
      console.log("item", item);
      if (item.isPushed === false) {
        // 此时走新增逻辑
        this.addMutiList(item);
      } else {
        // 此时走编辑逻辑
        this.editMutiList(item);
      }
    },
    // 多选状态下将每一个要发送的item添加到一个临时数组中，然后点击发送时遍历数组发送
    addMutiList(item) {
      item.isPushed = true;
      this.mutiList.push(item);
      console.log("item", item);
    },
    editMutiList(item) {
      this.mutiList.splice(this.mutiList.indexOf(item), 1); // 删除掉指定元素
      item.isPushed = false; // 然后把这一项的isPushed属性改回false表示没有被多选
    },
    // 修改当前的多选激活状态
    changeMutiSelect() {
      this.mutiSelectAvtive = !this.mutiSelectAvtive;
    },
    // 取消按钮 点击取消的时候所有多选数组变为空
    // 不用处理isPushed 下次点击多选按钮时会重置isPushed状态
    cancelMutiSelect() {
      this.mutiList = [];
      this.mutiSelectAvtive = !this.mutiSelectAvtive;
      this.rightsList.forEach((item) => {
        item.isPushed = false;
      });
      console.log("this.rightsList", this.rightsList);
    },
    //点击发送之后组装发送卡片的内容
    handleSendZhituCard(item) {
      console.log("item:", item);
      var content = {
        send_uid: this.selfInfo.username,
        receive_uid: this.chatId,
        content: item.rightName + " 进度卡片",
        share: {
          type: 201,
          isCardService: 1,
          service: {
            rightName: item.rightName,
            cancelText: "",
            confirmText: "",
            pic: item.rightImg,
            rightId: item.rightId,
            titleImg: item.rightImg,
            extra: item.extra,
            rightDesc: item.rightDesc,
            finishType: item.finishType,
            rightStatus: item.rightStatus,
            orderNum: item.orderNum,
            children: item.children,
            rightCardIcon: item.rightCardIcon,
            rightPersonId: this.chatId, //顾问发的时候要带对方的chatId
            rightPersonName: this.oppInfo.name, //和名字
          },
        },
        person_iname: this.selfInfo.info.nickname,
        person_pic: this.selfInfo.info.extras.GET_PIC,
        is_send: "1",
        idate: new Date().getTime(),
      };
      //处理一下报告时候的特殊情况
      // if()
      console.log("组装之后的content", content);
      this.$emit("createMsgContent", content);
      this.handleClose();
    },
    handleRightstatus(_item) {
      //职业报告显示已选择
      // if (_item.rightName.indexOf("报告") != -1) {
      //   return "已拥有";
      // }
      switch (_item.rightStatus) {
        case 0:
          return "未开放";
        case 1:
          return "未开始";
        case 2:
          return "已完成";
        case 3:
          return "已过期";
        case 4:
          return "未购买";
        default:
          return "未开放";
      }
    },
    init() {
      this.filterBoxShow = true;
      this.currentIndex = 0;
      this.reqGetPersonRightList();
    },
    handleClose() {
      this.filterBoxShow = false;
      this.mutiSelectAvtive = false;
      this.mutiList = [];
      this.rightsList.forEach((item) => {
        item.isPushed = false;
      });
    },
    //tab切换
    handleCateClick(index) {
      this.currentIndex = index;
      this.selecetedFirstRight = this.rightsList[index];
      console.log("selecetedFirstRight", this.selecetedFirstRight);
    },
    //处理卡片左边的步骤连线
    handleUpLineClass(item, index, rightsList) {
      const rightStatus = item.rightStatus;
      if (index == 0) return "";
      // 上一个已经完成，而且当前是即将要做的，upLine需高亮
      if (
        (rightsList[index - 1].rightStatus == 2 ||
          rightsList[index - 1].rightStatus == 3) &&
        rightStatus == 1
      ) {
        return "hasDoneLine";
      } else {
        return "futureLine";
      }
    },
    handleDownClass(item, index, rightsList) {
      const rightStatus = item.rightStatus;
      // 当前是第一个，而且是即将要做，无需高亮
      if (index == 0) {
        if (rightStatus == 1) {
          return "futureLine";
        } else if (rightStatus == 2 || rightStatus == 3) {
          return "hasDoneLine";
        }
      } else {
        // 如果不是第一个
        if (
          (rightsList[index - 1].rightStatus == 2 ||
            rightsList[index - 1].rightStatus == 3) &&
          rightStatus == 1
        ) {
          return "";
        }
      }
    },
    handleCircleClass(item, index, rightsList) {
      const rightStatus = item.rightStatus;
      // 如果是第一个，根据状态返回
      if (index == 0) {
        // 如果当前的状态是1而且是第一个，说明即将要进行
        if (rightStatus == 1) {
          return ["goingTodoBg"];
        }
        // 如果当前的状态是2或者3，说明已经完成
        if (rightStatus == 2 || rightStatus == 3) {
          return ["hasDoneBg"];
        }
      } else {
        // 如果是不是第一个
        // 如果当前的状态是2或者3，说明已经完成
        if (rightStatus == 2 || rightStatus == 3) {
          return ["hasDoneBg"];
        }
        // 如果当前的状态是1而且上一个状态是2或者3，说明即将要进行
        if (
          (rightsList[index - 1].rightStatus == 2 ||
            rightsList[index - 1].rightStatus == 3) &&
          rightStatus == 1
        ) {
          return ["goingTodoBg"];
        }
        // 如果上一个状态是1，说明当前的状态是未来要完成的
        if (rightsList[index - 1].rightStatus == 1 && rightStatus == 1) {
          return ["futureTodoBg"];
        }
      }
    },
    //获取权益列表
    reqGetPersonRightList() {
      const params = {
        consultantId: this.isConsultant
          ? this.personId
          : uni.getStorageSync("consultantId").replace("_consultant", ""),
        personId: this.isConsultant ? this.chatId : this.personId,
        // consultantId: 7846546,
        // personId: 7846546,
        chatRoles: this.chatRoles,
      };
      getPersonRightList(params)
        .then((res) => {
          if (res.code == 200) {
            this.rightsList = res.data;
            // 为每一个可以发送的card添加一个isPushed属性
            // true代表多选时已经选中 false代表多选时没选中
            if (this.rightsList.length > 0) {
              this.rightsList.forEach((item) => {
                item.isPushed = false;
              });
            }
            this.selecetedFirstRight = this.rightsList[0];
          } else {
            uni.showToast({
              icon: "none",
              title: res.status_desc || "获取权益列表失败",
              duration: 1000
            });
          }
        })
        .catch((e) => {
          uni.showToast({ icon: "none", title: "获取权益列表失败", duration: 1000 });
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-message: $img-base + "careerPath/";
.wrapper {
  background-color: #f5f5f5;
}
.popupTop {
  padding: 38rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .mutiSelect {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
  }
  .popupTitle {
    font-size: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 40rpx;
  }
  .closeBtn {
    width: 30rpx;
    height: 30rpx;
  }
}
.rightCard {
  // min-height: 268rpx;
  background: #ffffff;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 40%);
  border-radius: 16rpx;
  margin: 0 32rpx;
  padding: 22rpx 22rpx 30rpx;
  margin-bottom: 40rpx;
  .rightCardTop {
    display: flex;
    font-size: 32rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 800;
    color: #333333;
    line-height: 46rpx;
    margin-bottom: 40rpx;
    .rightCardIcon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 18rpx;
    }
  }
  .emptyText {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 40rpx;
    padding: 0 20rpx;
  }
  .rightCardBody {
    display: flex;
    .left {
      display: flex;
      flex-direction: column;
      .up-line {
        height: 15rpx;
        margin-left: 5rpx;
        width: 2rpx;
        background-color: transparent;
      }
      .circle {
        width: 12rpx;
        height: 12rpx;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        background: #d8d8d8;
      }
      .down-line {
        width: 2rpx;
        flex: 1;
        margin-left: 5rpx;
        background-color: #e3e2e2;
      }
      .futureLine {
        background: #e3e2e2;
      }
      .hasDoneLine {
        background: #ffcbbb;
      }
      .hasDoneBg {
        background: #ffcbbb;
      }
      .goingTodoBg {
        background: #ff7045;
      }
      .futureTodoBg {
        background: #d8d8d8;
      }
    }
    .right {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-left: 24rpx;
      padding-bottom: 40rpx;
      text {
        display: flex;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 40rpx;
      }
      .doingRight {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #ff7045;
        line-height: 40rpx;
      }
      .rightStatusText {
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #e7a586;
        line-height: 36rpx;
      }
    }
  }
  .rightCardBottom {
    display: flex;
    justify-content: flex-end;
    .circle,
    .circleRight {
      width: 52rpx;
      height: 52rpx;

      border-radius: 32rpx;
      border: 2rpx solid #d3d3d3;
    }
    .circle {
      background: #ffffff;
    }
    .circleRight {
      background-image: url($img-base-message + "confirmRight.png");
      background-size: 100% 100%;
    }
    .bottomBtn {
      padding: 8rpx 40rpx;
      color: #f75a3e;
      border-radius: 32rpx;
      border: 2rpx solid #d3d3d3;
    }
  }
}
.bottom {
  width: 90vw;
  position: absolute;
  margin: 0 32rpx;
  bottom: 100rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .alreadyChoose {
    font-size: 30rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #555555;
    span {
      color: #ff835d;
      margin: 0 20rpx;
    }
  }
  .confirmButton {
    width: 234rpx;
    height: 80rpx;
    background: #f75a3e;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
  }
}

::v-deep .u-drawer__scroll-view {
  background-color: #f5f5f5;
}
</style>